import { Breadcrumb, Tabs } from "antd";
import styled from "styled-components";
import BaseInfo from "./modules/BaseInfo";
import DataItems from "./modules/DataItems";
import InterfaceDescription from "./modules/InterfaceDescription";
import { Link } from "react-router-dom";
import { useParams } from "@/router/hooks";
import { useEffect, useState } from "react";
import { dataSubjectDetail } from '@/api/sharing/dataSubject'
import { useDictionary } from "@/hooks";
import CallInformation from "./modules/CallInformation";
const DataCatalogDetail = () => {
  useDictionary(['data_subject_type', 'param_type']);
  const { id: detailId } = useParams();

  const [fullData, setFullData] = useState({})

  useEffect(() => {
    dataSubjectDetail({ id: detailId }).then((res) => {
      setFullData(res?.result || {})
    })
  }, [])

  const items = [
    {
      key: '1',
      label: '基本信息',
      children: <BaseInfo fullData={fullData} />,
    },
    {
      key: '2',
      label: '调用信息',
      children: <CallInformation fullData={fullData} />,
    },
    {
      key: '3',
      label: '数据项',
      children: <DataItems fullData={fullData} />,
    },
    // {
    //   key: '4',
    //   label: '数据预览',
    //   children: <InterfaceDescription fullData={fullData} />,
    // },
  ];

  const onTabsChange = (key) => {
    console.log(key);
  };
  return (<StyleWrap>
    <div className="page-breadcrumb">
      <Breadcrumb
        items={[
          {
            title: <Link to="/integration/sharing/dataCatalog">数据目录</Link>,
          },
          {
            title: '目录详情-' + fullData.themeName,
          }
        ]}
      />
    </div>
    <Tabs defaultActiveKey="1" items={items} onChange={onTabsChange}></Tabs>
  </StyleWrap>);
}

const StyleWrap = styled.div`
  padding: 16px;
  .ant-tabs .ant-tabs-nav{
    margin-bottom: 30px;
  }
 
`

export default DataCatalogDetail;